import { customRef } from "vue"
// track, trigger
// track收集所有的依赖  比如html元素使用的数据 引用或者使用数据的所有依赖都会收集
// trigger   之后会通过trigger()  去触发副作用    简而言之就是更新视图

function debounce(fn, delay) {
  let timer = null
  return function () {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      // fn.apply(this, ...args)
      fn()
      console.log("里面")
    }, delay)
  }
}


export default function (val) {
  let timer = null
  return customRef((track, trigger) => {
    return {
      get() {
        track();
        return val;
      },
      // 为什么下面这样不行呢   因为每次进来set方法 timer不是同一个，所以每次清除的不是同一个timer，所以失效
      // set(newval) {
      //   debounce(function () {
      //     console.log("执行")
      //     val = newval
      //     trigger()
      //   }, 1000)()
      // },
      set(newval) {
        // val = newval  //将数据改变后   就需要去更新试图了   也就是触发对应的副作用
        // trigger();
        clearTimeout(timer)
        timer = setTimeout(() => {
          val = newval
          trigger()
        }, 1000)
        // debounce(function () {
        //   console.log("执行")
        //   val = newval
        //   trigger()
        // }, 1000)()
      }
    }
  })
}